<template>
  <div class="detail">
    <carousel></carousel>
    <router-link to="/Case">
      <button class="back">返回</button>
    </router-link>
    <div class="container">
      <div class="messge">
        <p>{{data.address}}</p>
        <p>{{data.createDate}}</p>
        <p>{{data.suntitle}}</p>
        <p>{{data.introduce}}</p>
      </div>
      <img :src="require(`../assets/image/case/${data.img}`)" alt="">
    </div>
  </div>
</template>

<script>
import carousel from '../components/carousel.vue'
export default {
  name: 'detail',
  data () {
    var img = this.$route.query.img
    var address = this.$route.query.address
    var suntitle = this.$route.query.suntitle
    var introduce = this.$route.query.introduce
    var createDate = this.$route.query.createDate
    return {
      data: {
        img, 
        address, 
        suntitle, 
        introduce, 
        createDate
      }
    }
  },
  components: {carousel},
  methods: {
    deta() {
      console.log(this.data)
    }
  },
  mounted() {
    this.deta()
  }
}
</script>

<style scoped lang="scss">
.detail {
  margin-top: 80px;
  margin-bottom: 112px;
  .back {
    display: inline-block;
    width: 100px;
    height: 40px;
    margin-top: 30px;
    margin-left: 30px;
    margin-bottom: 63px;
    border: none;
    background-color: #3296FA;
    color: #fff;
    font-weight: bold;
    border-radius: 2px;
    &:hover {
      background-color: #3570bd;
    }
  }

  .container {
    text-align: center;

    .messge {
      display: inline-block;
      text-align: left;
      color: #222222;
      width: 650px;

      > p:nth-child(1) {
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 23px;
      }
      > p:nth-child(2) {
        font-size: 18px;
        color: #3296FA;
        margin-bottom: 81px;
      }
      > p:nth-child(3) {
        font-size: 24px;
        font-weight: bold;
        color: #222222;
        margin-bottom: 20px;
      }
      > p:nth-child(4) {
        font-size: 16px;
        line-height: 26px;
        color: #222222;
        text-indent: 2em;
      }
    }
    > img {
      margin-left: 111px;
      vertical-align: top;
    }
  }
}
</style>